<template>
	<view class="container">
		<BsinTitle text="创建任务"></BsinTitle>
		<!-- 表单 -->
		<view class="form_container">
			<u--form :model="taskInfo" ref="taskForm" :rules="rules" :labelStyle="labelStyle">
				<u-form-item label="任务名称" prop="taskName" borderBottom labelWidth="auto">
					<u--input v-model="taskInfo.taskName" border="none" placeholder="请输入任务名称"></u--input>
				</u-form-item>
				<u-form-item label="任务类型" prop="claimMethod" borderBottom labelWidth="auto">
					<u-radio-group v-model="taskInfo.claimMethod">
						<u-radio label="单人任务" activeColor="var(--echo-main-color)" :name="0"></u-radio>
						<u-radio label="多人任务" activeColor="var(--echo-main-color)" style="margin-left: 40rpx;"
							:name="1">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="奖励币种" prop="ccy" borderBottom labelWidth="auto">
					<u-radio-group v-model="taskInfo.ccy">
						<u-radio label="原力" activeColor="var(--echo-main-color)" :name="'fc'"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="激励金额" prop="incentiveAmount" borderBottom labelWidth="auto">
					<u--input v-model="taskInfo.incentiveAmount" border="none" type="number" placeholder="请输入激励金额">
					</u--input>
				</u-form-item>
				<u-form-item label="开始时间" prop="startTime" borderBottom labelWidth="auto" @click="startTimeShow = true">
					<u--input v-model="taskInfo.startTime" border="none" placeholder="请选择开始时间" disabled
						style="background-color: #fff;">
					</u--input>
				</u-form-item>
				<u-form-item label="结束时间" prop="endTime" borderBottom labelWidth="auto" @click="endTimeShow = true">
					<u--input v-model="taskInfo.endTime" border="none" placeholder="请选择结束时间" disabled
						style="background-color: #fff;">
					</u--input>
				</u-form-item>
				<u-form-item prop="description" labelWidth="auto">
					<u--textarea placeholder="请输入任务描述" v-model="taskInfo.description" confirmType="done"></u--textarea>
				</u-form-item>
			</u--form>
			<u-button text="创建" color="var(--echo-main-color)" @click="doSubmit"></u-button>
		</view>
		<u-datetime-picker :show="startTimeShow" v-model="startTime" mode="date" @confirm="selectStartTime"
			@cancel="startTimeShow = false">
		</u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" v-model="endTime" mode="date" @confirm="selectEndTime"
			@cancel="endTimeShow = false">
		</u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form的样式
				labelStyle: {
					marginRight: '30rpx'
				},
				// 表单数据
				taskInfo: {
					taskName: '',
					incentiveAmount: '',
					description: '',
					// 用户标识
					customerNo: '',
					// 币种
					ccy: 'fc',
					// 任务类型,单人多人
					claimMethod: 0,
					// 任务类型 个人任务
					type: 0,
					startTime: '',
					endTime: ''
				},
				// 控制日期选择框
				startTimeShow: false, // 开始时间
				endTimeShow: false, // 结束时间
				startTime: Number(new Date()),
				endTime: Number(new Date()),
				// 规则
				rules: {
					taskName: [{
						required: true,
						message: "请填写任务名"
					}],
					claimMethod: [{
						required: true,
						message: "请选择任务类型"
					}],
					ccy: [{
						required: true,
						message: "请选择币种"
					}],
					description: [{
						required: false
					}],
				},
			}
		},
		methods: {

			// 选择开始时间
			selectStartTime(dataTime) {
				this.taskInfo.startTime = uni.$u.timeFormat(dataTime.value, 'yyyy-mm-dd')
				this.startTimeShow = false
			},

			selectEndTime(dataTime) {
				this.taskInfo.endTime = uni.$u.timeFormat(dataTime.value, 'yyyy-mm-dd')
				this.endTimeShow = false
			},

			doSubmit() {
				console.log('创建');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		/* 确保没有高度的时候也会100% */
		min-height: 100vh;
		background-color: #F9F9F9;

		.form_container {
			padding: 0 30rpx;
		}
	}
</style>
